import './index.less';
import { Tabbar } from 'react-vant';
import { FriendsO, HomeO, AppsO, ShoppingCartO , Description} from '@react-vant/icons';
import { useEffect, useMemo, useState } from 'react';
import { history } from 'umi';

export default function IndexPage(props) {
  const [name, setname] = useState('home');
  const urlname = props.location.pathname.split('/')[2];
  useEffect(() => {
    setname(urlname);
  }, [urlname]);
  const handelchange = (v) => {
    switch (v) {
      case 'home':
        history.push('/app/home');
        break;
      case 'cast':
        history.push('/app/cast');
        break;
      case 'question':
        history.push('/app/question');
        break;
      case 'my':
        history.push('/app/my');
        break;
      case 'caipu':
        history.push('/app/caipu');
        break;
    }
  };
  return (
    <div className="app">
      {props.children}
      <div className="demo-tabbar">
        <Tabbar
          value={name}
          onChange={(v) => {
            handelchange(v);
          }}
        >
          <Tabbar.Item name="home" icon={<HomeO />}>
            首页
          </Tabbar.Item>
          <Tabbar.Item name="cast" icon={<AppsO />}>
            分类
          </Tabbar.Item>
          <Tabbar.Item name="caipu" icon={<Description />}>
            菜谱
          </Tabbar.Item>
          <Tabbar.Item name="question" icon={<ShoppingCartO />}>
            购物车
          </Tabbar.Item>
          <Tabbar.Item name="my" icon={<FriendsO />}>
            我的
          </Tabbar.Item>
        </Tabbar>
      </div>
    </div>
  );
}
